<style scoped>
  ul {
    list-style-type: none;
  }
</style>

<template>
  <div>
    遍历数组
    <ul>
      <li v-for="(item, index) in listArr" :key="item.id">
        {{index}} - {{item.id}} - {{item.name}}
      </li>
    </ul>

    遍历对象
    <ul>
      <li v-for="(item, key, index) in listObj" :key="key">
        {{index}} - {{key}} - {{item.id}} - {{item.name}}
      </li>
    </ul>

    <!-- 问：为什么v-for v-if不建议放在同一元素上 ? -->
    <!-- 答：因为v-for优先级比v-if要高，而遍历时会重复执行条件判断，影响性能 -->
    <!-- 解决方案：使用computed筛选 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      listArr: [
        { id: 1, name: 'Aaron1' },
        { id: 2, name: 'Aaron2' },
        { id: 3, name: 'Aaron3' }
      ],
      listObj: {
        a: { id: 1, name: 'Aaron1' },
        b: { id: 2, name: 'Aaron2' },
        c: { id: 3, name: 'Aaron3' }
      }
    }
  }
}
</script>